<template>
	<view class="help-list">
		<view class="back">
			<view class="back-circle" @click="back()">
				<text class="iconfont icon-left"></text>
			</view>
		</view>
		<view class="map-list">
			<map class="map-info" :latitude="latitude" :longitude="longitude" :markers="markers"
			:scale="13" controls show-location></map>
		</view>
		<!-- <view class="poi-type">
				<sun-tab @change="tabChange" :value.sync="index" scroll rangeKey="name" :tabList="tabList"></sun-tab>
		
			
		</view> -->
		<view class="service-title">
			<view class="title-info">
				{{serviceOb.servicesname}}
			</view>
			<view class="service-desc">
				<text>
					{{serviceOb.profile}}
				</text>
			</view>
			<view>
				<text class="c-btn" @click="viewtext" v-if="introduction.length > 60">
				{{view_text}}
				</text>
			</view>	
		</view>
		
		<view class="service-info" :style="serviceOb.profile ? 'margin-top: 20rpx;':''">
			<view class="jichu-info">
				<!-- <view> -->
					<image :src="image"></image>
				<!-- </view> -->
				<view class="jichu-desc">
					<view class="jichu-title" >
						<text>基础信息</text>
					</view>
					<view class="jichu-fuwu">
						<view >
							<text>服务区编号：</text>
							<text class="right-text">{{serviceOb.roadname}}</text>
							
						</view>
						<view>
							<text>所属路段编号：</text>
							<text class="right-text">{{serviceOb.serviceid}}</text>
							
						</view>
						<view v-if="serviceOb.segmentname">
							<text>所属路段名称：</text>
							<text class="right-text">{{serviceOb.segmentname}}</text>
						</view>
						<view>
							<text>服务区方向：</text>
							<text class="right-text">{{serviceOb.direction}}</text>
						</view>
					</view>
					
				</view>
			</view>
			<view class="jichu-icon">
				<view class="circle" >
					<view class="circle-parent" :class="serviceOb.catering == 0 ? 'isnot-border':''">
						<text class="iconfont icon-iconfontcanyin"></text>
					</view>		
					<text class="circle-text" :style="serviceOb.catering == 0 ? 'color:#999;text-decoration: line-through':''">餐饮服务</text>
				</view>
				<view class="circle">
					<view class="circle-parent" :class="serviceOb.supermarket == 0 ? 'isnot-border':''">
						<text class="iconfont icon-chaoshi"></text>
					</view>	
					<text class="circle-text" :style="serviceOb.supermarket == 0 ? 'color:#999;text-decoration: line-through':''">超市服务</text>
				</view>
				<view class="circle">
					<view class="circle-parent" :class="serviceOb.toilet == 0 ? 'isnot-border':''">
						<text class="iconfont icon-xishoujian"></text>
					</view>	
					<text class="circle-text" :style="serviceOb.toilet == 0 ? 'color:#999;text-decoration: line-through':''">洗手间</text>
				</view>
				<view class="circle">
					<view class="circle-parent" :class="serviceOb.feature == 0 ? 'isnot-border':''">
						<text class="iconfont icon-tese"></text>
					</view>	
					<text class="circle-text" :style="serviceOb.feature == 0 ? 'color:#999;text-decoration: line-through':''">特色经营</text>
				</view>
				<view class="circle">
					<view class="circle-parent" :class="serviceOb.boilingwater == 0 ? 'isnot-border':''">
						<text class="iconfont icon-reshuiqi"></text>
					</view>	
					<text class="circle-text" :style="serviceOb.boilingwater == 0 ? 'color:#999;text-decoration: line-through':''">提供开水</text>
				</view>
				<view class="circle">
					<view class="circle-parent" :class="serviceOb.petrol == 0 ? 'isnot-border':''">
						<text class="iconfont icon-jiayouzhanzulin01"></text>
					</view>	
					<text class="circle-text" :style="serviceOb.petrol == 0 ? 'color:#999;text-decoration: line-through':''">加油站</text>
				</view>
				<view class="circle">
					<view class="circle-parent" :class="serviceOb.gas == 0 ? 'isnot-border':''">
						<text class="iconfont icon-ranqi"></text>
					</view>	
					<text class="circle-text" :style="serviceOb.gas == 0 ? 'color:#999;text-decoration: line-through':''">燃气服务</text>
				</view>
				<view class="circle">
					<view class="circle-parent" :class="serviceOb.chargingpile == 0 ? 'isnot-border':''">
						<text class="iconfont icon-chongdianzhuang"></text>
					</view>	
					<text class="circle-text" :style="serviceOb.chargingpile == 0 ? 'color:#999;text-decoration: line-through':''">充电桩</text>
				</view>
				<view class="circle">
					<view class="circle-parent" :class="serviceOb.vehiclemaintenance == 0 ? 'isnot-border':''">
						<text class="iconfont icon-cheliangweixiu"></text>
					</view>	
					<text class="circle-text" :style="serviceOb.vehiclemaintenance == 0 ? 'color:#999;text-decoration: line-through':''">车辆维修</text>
				</view>
			</view>
		</view>
		
		<view class="jiayou-list">
			<view class="jiayou-title">
					<text>加油站信息</text>
					<text>加油站提供的汽油类型</text>
			</view>
			<view class="jiayou-icon">
				<view class="jiayou-button" :class="qiyouOb.petrol92 == 0 ?'isnot':''">
					<text class="iconfont icon-sanzhuangqiyouguanli"></text>
					<text>92号汽油</text>
					<view class="tips" v-if="qiyouOb.petrol92 == 3">
						<text>未知信息</text>
					</view>
				</view>
				<view class="jiayou-button" :class="qiyouOb.petrol95 == 0 ?'isnot':''">
					<text class="iconfont icon-sanzhuangqiyouguanli"></text>
					<text>95号汽油</text>
					<view class="tips" v-if="qiyouOb.petrol95 == 3">
						<text>未知信息</text>
					</view>
				</view>
				<view class="jiayou-button" :class="qiyouOb.petrol98 == 0 ?'isnot':''">
					<text class="iconfont icon-sanzhuangqiyouguanli"></text>
					<text>98号汽油</text>
					<view class="tips" v-if="qiyouOb.petrol98 == 3">
						<text>未知信息</text>
					</view>
				</view>
				<view class="jiayou-button" :class="qiyouOb.diesel0 == 0 ?'isnot':''">
					<text class="iconfont icon-sanzhuangqiyouguanli"></text>
					<text>0号柴油</text>
					<view class="tips" v-if="qiyouOb.diesel0 == 3">
						<text>未知信息</text>
					</view>
				</view>
				<view class="jiayou-button" :class="qiyouOb.diesel10 == 0 ?'isnot':''">
					<text class="iconfont icon-sanzhuangqiyouguanli"></text>
					<text>-10号柴油</text>
					<view class="tips" v-if="qiyouOb.diesel10 == 3">
						<text>未知信息</text>
					</view>
				</view>
				<view class="jiayou-button" :class="qiyouOb.diesel20 == 0 ?'isnot':''">
					<text class="iconfont icon-sanzhuangqiyouguanli"></text>
					<text>-20号柴油</text>
					<view class="tips" v-if="qiyouOb.diesel20 == 3">
						<text>未知信息</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import amap from '@/common/js/amap-wx.js'
	import sunTab from '@/components/sun-tab/sun-tab.vue'
	export default {
		components:{
			sunTab
		},
		data() {
			return {
				poiTypeId:'',
				id:'',
				image:'https://sz.smates.cn/filemanager/file/view/ca906920c23b4c9a8564911d4dd5a90d/full',
				isfull:true,
				view_text:'显示全文',
				index: 0,
				//高德key
				key:'b56e180ab79c37ab0452a550917e74fc',
				latitude: "",
				amap:'',
				longitude:"" ,
				serviceOb:{},
				markers:[
					
				],
				qiyouOb:{},
				introduction:'',
				address:'',
				poiType:'',
				tabList:[],
				poiList:[]
			};
		},
		onLoad:function(option){
			console.log(option)
			this.amap = new amap.AMapWX({
				key:this.key
			})
			this.id = option.id
			this.getPOIList()
			this.getQiYouList(this.id)
			// this.getLocation()
			// this.getPOIType()
		},
		methods:{
			viewtext() { // 查看全文
				if (this.isfull) {
					this.serviceOb.profile = this.introduction
					this.view_text = '收起'
					this.isfull = false
				} else {
					this.introduction = this.serviceOb.profile.slice()
					this.serviceOb.profile = this.introduction.slice(0, 60) + '...'
					this.view_text = '显示全文'
					this.isfull = true
				}
			},
			back:function(){
				uni.navigateBack({
				
				})
			},
			//拨打电话
			phoneCall:function(item){
				console.log(item)
				let obj = item 
				let number = obj.phone.toString().replace('-','')
				console.log("号码：",number)
				uni.makePhoneCall({
					phoneNumber:number
				})
// 				uni.showModal({
// 					title: '提示',
// 					content: '拨打' + obj.phone,
// 					success: res=>{
// 
// 					}
// 				})
			},
			tabChange:function(e){
				console.log(e)
				let item = e.tab
				this.poiType = item.id
				this.getPOIList()
			},
			getLocation:function(){
		
				this.amap.getRegeo({
					success:data=>{
						console.log("高德返回--------->",data[0])
						let result = data[0]
						this.latitude = result.latitude
						this.longitude = result.longitude
						
						this.address = result.regeocodeData
						console.log("地址信息----------->",this.address)
						this.getPOIList()
					}
				})

				
			},
			//获取周边poi列表
			getPOIList:function(){
				this.markers = []
				let params = {
					pageIndex:'1',
					pageSize:'10',
					id:this.id,
					channelType:'1'
				}
				this.$postApi(this.$path.SERVICE_INFO,params).then(res => {
					console.log("服务列表返回数据------------->",res.data)
					
					let list = res.data.data.list[0]
					this.latitude = list.latitude
					this.longitude = list.longitude
					list.profile = this.pub.TransferStringBack(list.profile)
					this.serviceOb = list
					// 处理介绍文字
					this.introduction = this.serviceOb.profile.slice();
					if (this.serviceOb.profile.length > 60) {
						this.serviceOb.profile = this.introduction.slice(0, 60) + '...'
					} else {
						this.serviceOb.profile = this.introduction
					}
					// let locationlist = []
					// list.forEach(item => {
					// 	item.degree = JSON.parse(item.degree)
					// 	item.degree.forEach(location => {
					// 		if(location.type == "tengxun"){
					// 			locationlist.push({
					// 				latitude: location.latitude,
					// 				longitude:location.longitude,
					// 				iconPath:'../../static/img/location.png',
					// 				callout:{
					// 					content:item.title,
					// 					borderRadius:12,
					// 					padding:10,
					// 					textAlign:'center'
					// 				}
					// 			})
					// 		}
					// 	})
						
					// })
					// this.poiList = list
					// this.markers = this.markers.concat(locationlist)
					console.log("serviceOb--------->",this.serviceOb)
				})
			},
			//获取汽油信息
			getQiYouList(id){
				let params = {
					serviceareaid:id
				}
				this.$postApi(this.$path.QIYOU_LIST,params).then(res => {
					console.log("汽油返回数据---------->",res.data)
					if(res.data.success){
						let list = res.data.data.list[0]
						this.qiyouOb = list
					}
				})
				console.log("qiyouOb----->",this.qiyouOb)
			}
		
		}
	}
</script>

<style lang="scss">
	.br{
		width: 100%;
		height: 2upx;
		background: #f7f7f7;
	}
	.help-list{
		min-height: 100%;
		font-size: 32upx;
		background: #f7f7f7;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.isnot{
		color: #ccc !important;
		border: 1upx solid #eee !important;
		text-decoration: line-through !important;
	}
	.isnot-border{
		color: #999 !important;
		
		border: 1upx solid #999 !important;
	}
	.back{
		position: absolute;
		top:95upx;
		left: 25upx;
		z-index:99999;
		.back-circle{
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			background: #fff;
			width: 60upx;
			height: 60upx;
		}
	}
	.map-info{
		width: 100%;
		height: 600upx;
	}
	.service-title{
		// height: 300upx;
		position: relative;
		background: #fff;
		padding: 20upx 25upx 15upx 20upx;
		.c-btn {
			color: rgb(0,146,255);
			margin-left: 10upx;
			position: absolute;
			bottom: 20upx;
			right: 20upx;
		}
		.title-info{
			font-family:PingFang-SC-bold;
			font-size: 52upx;
			font-weight: bold;
		}
		.service-desc{
			margin-top: 10upx;
			font-size: 32upx;
			line-height: 54upx;
			color: #333;
		}
		
	}
	.service-info{
		width: 100%;
		// margin-top: 20upx;
		background: #fff;
		position: relative;
		padding: 30upx;
		.jichu-info{
			height: 367upx;
		}
		.jichu-desc{
			position: absolute;
			top: 5%;
			left:15%;
			// display: flex;
			// flex-direction: column;
			// justify-content: center;
			// align-items: center;
			.jichu-title{
				text-align: center;
				font-size: 40upx;
				font-weight: bold;
			}
			.jichu-fuwu{
				margin-top: 70upx;
				.right-text{
					color: #aaa;
					font-family: PingFang-SC;
				}
			}
			.jichu-fuwu view{
				margin-bottom: 10upx;
				
			}
		}
	}
	.jichu-icon{
		display: flex;
		flex-wrap: wrap;
		margin-top: 30upx;
		// flex-direction: ro;
		height: 600upx;
		.circle{
			// height: 600upx;
			width:33%;
			font-size: 40upx;
			display: flex;
			height: 130upx;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			// text-align: center;
			.circle-parent{
				color: #0092FF;
				border-radius: 50%;
				border:1upx solid #0092ff;
				width: 75upx;
				height: 75upx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.circle-text{
				font-size: 30upx;
				color: #333;
			}
		}
	}
	.jiayou-list{
		width: 100%;
		background: #fff;
		margin-top: 20upx;
		padding: 30upx;
		text-align: center;
		.jiayou-title{
			display: flex;
			flex-direction: column;
		}
		.jiayou-title text:first-child{
			font-family: PingFang-SC-bold;
			font-size: 40upx;
			color: #333;
		}
		.jiayou-title text:last-child{
			font-size: 26upx;
			color: #999;
		}
		.jiayou-icon{
			margin-top: 30upx;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			height: 360upx;
			.jiayou-button{
				width: 312upx;
				height: 101upx;
				border-radius: 12upx;
				border: 1upx solid #ccc;
				display: flex;
				letter-spacing: 5upx;
				justify-content: center;
				align-items: center;
				position: relative;
				color: #333;
				font-size: 30upx;
			}
			.jiayou-button>text:first-child{
				color: #737373;
				font-size: 26upx;
			}
			// .jiayou-button>text:last-child{
			// 	color: #333;
			// 	font-size: 30upx;
			// }
			.tips{
				position: absolute;
				width: 100upx;
				height: 30upx;
				font-size: 16upx !important;
				padding: 5upx;
				border-radius: 0 12upx 0 12upx;
				color: #fff;
				background: #ccc;
				top: 0;
				right: 0;
			}
		}
	}
</style>
